<script lang="ts">
import {defineComponent} from "vue";


export default defineComponent({
  name: "VerticalTable",
  props: {
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
})
</script>

<template>
  <table>
    <tr v-for="(item,key) in columns" :key="key">
      <th>
        <el-icon v-if="item.icon" color="#8A8E92" size="16" style="vertical-align: -1.5px;margin-right: 9px">
          <component :is="item.icon"/>
        </el-icon>
        <text>{{item.title}}</text>
      </th>
      <td>
        <slot :data="dataList[key]" :name="item.key">
          {{dataList[key][item.key]}}
        </slot>
      </td>
    </tr>
  </table>
</template>

<style lang="scss" scoped>
th, td {
  border: 1px solid #DCE0E6;
  padding: 7px 16px;
  height: 30px;
  line-height: 30px;
}

th {
  width: 1.2%;
  background-color: #F6F7F9;
  color: #5E6369;
  font-weight: 500;
}

td {
  width: 10%;
  background-color: #fff;
  color: #303233;
}
</style>
